<template>

  <van-skeleton title avatar :row="3" :loading="props.loading" v-for="user in userList " >


    <van-card
        :desc="user.profile"
        :title="`${user.username}`"
        :thumb="user.avatarUrl?user.avatarUrl:defaultPicture"
        :key="user.id"
        @click="showUser(user.id)"
    >
      <template #price>
        <van-tag color="#48b0e8">{{
            user.role === 1 ? '管理员' : '用户'
          }}</van-tag>
      </template>
      <template #tags>
        <van-tag
            plain
            type="danger"
            v-for="(tag, index) in user.tags"
            style="margin-right: 8px; margin-top: 8px"
            :key="index"
        >
          {{ tag }}
        </van-tag>
      </template>
      <template #footer>
<!--        <van-button size="mini">联系我</van-button>-->
      </template>
    </van-card>
<!--      <van-card-->
<!--          :desc="user.profile"-->
<!--          :tag="getGenderTag(user.gender)"-->
<!--          :title="user.username"-->
<!--          :thumb="user.avatarUrl?user.avatarUrl:defaultPicture"-->
<!--          @click="showUser(user.id)"-->
<!--      >-->


<!--        <template #tags>-->
<!--          <van-tag plain type="primary"  v-for="tag in user.tags"   style="margin-right: 8px ; margin-top: 8px" >-->
<!--            {{tag}}-->
<!--          </van-tag>-->

<!--        </template>-->
<!--        <template #footer>-->
<!--          <van-button size="mini">联系我</van-button>-->

<!--        </template>-->
<!--      </van-card>-->

  </van-skeleton>


</template>

<script setup lang="ts">

import {UserType} from "../models/user";
import myAxios from "../plugins/myAxios";
import {useRouter} from "vue-router";
import {defaultPicture} from "../common/userCommon"
import {ref} from "vue";


interface UserCardListProps{
  loading: boolean;
  userList: UserType[];
}
const props= withDefaults(defineProps<UserCardListProps>(),{
  //@ts-ignore
  userList: [] as UserType[],
  loading: true,
});
const gender = ref(0)
const getGenderTag = (gender) =>{
  return gender === 1 ? '男' : (gender === 0 ? '女' : '');
}

const router = useRouter();
const showUser =  ( id:number) =>{
  router.push({
    path: '/user/show',
    query: {
      id,
    }
  })

}



</script>

<style lang="scss" scoped>
//@import "../assets/css/userList.css";
//@import "../assets/css/public.css";
//
//:deep(.van-search__field) {
//  flex: 1;
//  align-items: center;
//  padding: 0 var(--van-padding-xs) 0 0;
//  height: var(--van-search-input-height);
//  background-color: transparent;
//}

.home-container {
  height: 100%;
  display: block;
  .home-top {
    padding: 10px;
  }
  .home-swipe {
    height: 200px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .home-recommend {
    padding: 10px;
    padding-bottom: 80px;
    h2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      color: #48b0e8;
      font-size: large;
      span {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>